import styled from 'styled-components'
import border from 'components/styled/border' 

const DivContainer = styled.div`

 ul{  
          margin-top:.15rem;
          width:100%;
         
    }
`
// 左边定位
const ChooseLocaTionContainer = styled.div`
display: flex;
flex-direction: column;
height:100%;
.lContent{
    width:100%;
    display:flex;
    .lForm{
         display:flex;
         justify-content:start;
         align-items:center;
         width:100%;
         height:.3rem;
         border-radius:.2rem;
         background:#EBEBEB;
         margin:.1rem .15rem 0;
          img.search{
           width:.2rem;
           height:.2rem;
           margin-left:.15rem;
           margin-top:.2em;
         }
         .inpContent{
            
             height:.28rem;
             outline:none;
             background:#EBEBEB;
             border:0;
         } 
     }
}
    
     .lWrapper{
         margin:0 .15rem;
         height:1.3rem;
         .lText{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-top:.25rem;
            color:#646464;
            font-size:.14rem;
            .downIcon{
                width:.15rem;
                height:.15rem;
                margin-left:.05rem;
            }
         }

     }
     
     .currentLoca{
         .curText{
                display:flex;
                justify-content:space-between;
                align-items:center;
                margin-top:.25rem;
                color:#646464;
                font-size:.14rem;
                img.dizhi{
                    width:.2rem;
                    height:.2rem;
                    margin-right:.1rem;
                }
                img.dh{
                    width:.15rem;
                    height:.15rem;
                    margin-left:.1rem;
                }
         }
         .usedLoca{
             ul{
                 li{
                     margin-left:.45rem;
                     color:#c0c0c0;
                     font-size:.14rem;
                     padding:.1rem 0;
                 }
             }
         }
       
     }
     .mask{
         width:100%;
         height:100%;
         position:absolute;
         top:0;
         left:0;
         opacity:0.9;
         background:rgba(0,0,0,.7);
         .cancel-img{
             position:absolute;
             left:5%;
             top:2%;
         }
         .innerMask{
             position:absolute;
             right:5%;
             top:20%;
             width:80%;
             height:70%;
             border-radius:1%;
             background:#fff;
         }
     }
     
`
// 热门学校
const HotSchoolContainer = border({
    width:'1px 0 0 0',
    color:'#ebebeb',
    comp:styled.div`
   
    flex:1;
    height:1rem;
       display:flex;
       flex-direction:column;
       .hotSc{
       display:flex;
       flex-direction:column;
       height:100%;
        width:100%
            h3{
                color:#646464;
                font-size:.14rem;
                padding-top:.1rem;
                height:.3rem;
                margin-left:.15rem;
       }
       .schoolName{ 
             flex:1;
             overflow:auto;
           ul{
            
              padding-top:.2rem; 
               li{
                   display:flex;
                   align-items:center;
                   background:#fff;
                   margin:.1rem .35rem ;
                   color:#646464;
                   text-align:center;
                   padding:.12rem .15rem;
                   border-radius:.1rem;
                   box-shadow:0 .03rem .06rem rgba(0,0,0,0.08);
                   opacity:1;

               }
           }
       }
       }
      
      
    `
})
// 放大镜->搜索
const SearchContainer = styled.div`

     .hotSearch{
         margin:.2rem .15rem .08rem;
         h2{
             font-size:.18rem;
             font-weight:normal;
             color:#646464;
         }
         .tag-container{
            display: flex;
            padding-top: .09rem;
            flex-direction: row;
            flex-wrap: wrap;
            }
            .tag-container > div {
                margin-left: .09rem;
                margin-bottom: .2rem;
            }
                }
`
// 消息
const InfoBoxContainer = border({
    width:'0 0 1px 0',
    color:"#ebebeb",
    comp:styled.li`
              width:100%;
              padding:.1rem .15rem;
              display:flex;
              justify-content:space-between;
              align-items:center;
              color:#c0c0c0;
              .mLeft{
                display:flex;
                justify-content:space-between;
                align-items:center;
                    img{
                       
                        width:.5rem;
                        height:.5rem;
                    }
                
                  .mContent{
                      flex:1;
                      margin-left:.1rem;
                    p:first-child{
                        font-size:.14rem;
                        color:#646464;
                        padding-bottom:.05rem;
                    }
                      p.pContent{
                          width:80%;
                          overflow:hidden;
                          text-overflow:ellipsis;
                          white-space:nowrap;
                        color:#c0c0c0;
                        font-size:.12rem;
                      }
                      
                  }
                
               
                
              }
             
          
         
      
    `
})

// 昵称消息
const MessageContainer = styled.div`
         height:100%;
      .mInfo{
         display:flex;
          height:100%;
          flex-direction:column;
      } 
      .mContent{
      margin:.35rem .15rem .1rem .15rem;
      flex:1;
       .cLeft{
           display:flex;
           justify-content:flex-start;
           align-items:center;
           margin-bottom:.3rem;
           img{
               width:.5rem;
               height:.5rem;
               
           }
           p{
               width:50%;
               height:.4rem;
               line-height:.4rem;
               background:#56D9D1;
               border-radius:.1rem;
               text-align:center;
               color:#fff;
           }
       }
       .cRight{
           display:flex;
           justify-content:flex-end;
           align-items:center;
           margin-bottom:.3rem;
           img{
               width:.5rem;
               height:.5rem;
                
              
           }
           p{
               width:50%;
               height:.4rem;
               line-height:.4rem;
               background:#56D9D1;
               border-radius:.1rem;
               text-align:center;
               color:#fff;
           }
       }
       
}
   
`

// 消息输入框
const InputContainer = border({
    width:"1px 0 0 0",
    color:'#ebebeb',
    comp:styled.div`
     margin:0 .15rem;
     display:flex;

     align-items:center;
     height:.49rem;
        img{
            display:flex;
            flex-grow:0;
            width:.25rem;
            margin:.05rem;
            height:.25rem;
        }
        img:last-child{
            margin:0;
        }
        .inpContent{
            flex-grow:1;
            border:1px solid #707070;
            border-radius:.05rem;
            height:.3rem;
            padding-left:.1rem;
        }
        
    `
})

// 帮助中心
const HelpContainer = styled.ul`
   margin-top:.25rem;
   padding:.3rem;
   display:flex;
   flex-direction:column;
   li{
       background:#56D9D1;
       border-radius:.1rem;
       height:.8rem;
       line-height:.8rem;
       text-align:left;
       padding-left:.24rem;
       color:#fff;
       margin-bottom:.15rem;
   }

`

// 等级增减提升
const LevelContainer = styled.ul`
   margin-top:.25rem;
   padding:.3rem;
   display:flex;
   flex-direction:column;
   li{
       background:#56D9D1;
       border-radius:.1rem;
       /* height:.8rem; */
       
       color:#fff;
       padding:0 .24rem;
       margin-bottom:.15rem;
       display:flex;
       justify-content:space-between;
       align-items:center;
       .levelLeft{

           padding:.1rem 0;
           h2{
               font-size:.14rem;
               margin-bottom:.05rem;
               
           }
           p{
               font-size:.12rem;
               text-indent:.2rem;
             span{
                 padding-left:.3rem;
             } 
           }
        
       }
       /* .levelRight{
           padding-left:.3rem;
       } */
   }

`
// 系统公告
const NoticeContainer = styled.div`
       margin:.25rem .3rem;
       text-align:center;
       border-radius:.1rem;
       background:#56D9D1;
       color:#fff;
      
       h2{
           font-size:.18rem;
           padding-top:.15rem;
           font-weight:normal;
       }
       
       p{
           font-size:.12rem;
           line-height:.18rem;
       }
       .nContent{
            text-indent:.27rem;
            padding:.28rem;
            text-align:left;
            font-size:.14rem;
            line-height:.18rem;
       }
     
`
// 活动提示
const ActivityContainer = styled.div`
       h3{

           font-weight:normal;
           color:#646464;
           font-size:.14rem;
           padding:.25rem 0 .15rem .15rem;
       }
       img{
           width:100%;
           height:100%;
       }
`


// 签到
const SignContainer = styled.div`
   
 .signContent{
     display:flex;
     justify-content:center;
     width:100%;
     text-align:center;
    
     .topContent{
        display:flex;  
        margin:.25rem .28rem;
         justify-content:center;
         align-items:center;
            span:first-child{
                margin-right:.05rem;
            }
            span{
                font-size:.14rem;
                color:#646464;
            }
         .signIcon{
             display:flex;
             i{
                 display:inline-block;
                 width:.7rem;
                 height:.7rem;
                 line-height:.7rem;
                 background:#56D9D1;
                 font-size:.24rem;
                 border-radius:.1rem;
                 color:#fff;
                 margin-right:.05rem;
             }
         }
     }
     
 }
 .centerContent{
        background:rgba(255,255,255,1);
        box-shadow:0 .03rem .06rem rgba(0,0,0,0.08);
        opacity:1;
        margin:0 .15rem;
        border-radius:.03rem;
     .giftContent{
        display:flex;
         justify-content:space-between;
         align-items:center;
         padding:.15rem .35rem .15rem;
         .btnSign{
             padding:.03rem .22rem;
             background:#56D9D1;
             font-size:.14rem;
             color:#fff;
             border-radius:.1rem;
            
            
         }
       
        
     }
     .show-info{
        
         padding:0 .35rem .15rem;
         
         .progress{
             width:100%;
            
         }
      
         .signGift{
            position: relative;
             width:.2rem;
             height:.2rem;
         }
     }
     
        
  
     
       
 }
 .sTitle{
        display:flex;
        padding:.25rem .15rem .15rem;
        color:#646464;
        font-size:.14rem;
        justify-content:space-between;
        .more{
            width:.15rem;
            height:.15rem;
        }

        }

`

// 新手任务
const NewTaskContainer = styled.div`
height:100%;
display:flex;
flex-direction:column;
.newWrap{
   display:flex;
   flex-direction:column;
   height:1rem;
   height: 110px;
    flex: 1;
    
}
  .taskPic{
        height:1.6rem;
        /* height:0 !important; */
        /* padding-bottom:42.6666667% !important; */
       img{
          width:100%;
       }
  }
  .newtask{
      height:100%;
      flex:1;
  }
  .hallTask{
      display:flex;
      height:.6rem;
      justify-content:flex-end;
      margin-right:.15rem;
      padding:.15rem 0;

      h3{
          color:#646464;
          font-size:.14rem;
          margin-right:.05rem;
         
      }
      .more{
         width:.15rem;
         height:.15rem;
      }
  }
  .taskList{
      width:100%;
      display:flex;
      flex-direction:column;
      flex: 1;
      overflow: scroll; 
      li{
        padding:.25rem .25rem;
        margin:0 .15rem .13rem;
        color:#c0c0c0;
        background:rgba(255,255,255,1);
        box-shadow:0 .03rem .06rem rgba(0,0,0,0.08);
        opacity:1;
        border-radius:.1rem;
     .newtask{
                display:flex;
                justify-content:space-between; */
                align-items:center;
                .newgif{
                    display:flex;
                }
         img{
                width:.3rem;
                height:.3rem;
                margin-right:.1rem;
                
            }
            .taskTitle{
               /* text-align:left; */
            }
            
               .rightTask{
                 
                p.rBtn{
                    
                    width:.7rem;
                    height:.25rem;
                    text-align:center;
                    line-height:.25rem;
                    background:#56D9D1;
                    border-radius:.1rem;
                    margin-left:-.15rem;
                    font-size:.14rem;
                    color:#fff;
      
             }
               }
             
            }
       
           
        }
       
      
     
      
  

      
  
  
`

// 诚信公约

    const FaithContainer = styled.div`
     
     
          .faithM{
              height:100%;
              flex:1;
              overflow:scroll;
              width:100%;
              padding-top:.2rem;
              h3{
                  text-align:center;
                  color:#646464;
                  font-size:.17rem;
                  padding:.1rem 0 .15rem 0;
                  font-weight:normal;
                  
                  
              }
              p{
                padding:0 .57rem;  
                color:#646464;
                text-align:left;
                font-size:.13rem;
                line-height:.3rem;
                text-indent:.3rem;
              }
          }
    `
export{
    InfoBoxContainer,
    SearchContainer,
    DivContainer,
    MessageContainer,
    InputContainer,
    HelpContainer,
    LevelContainer,
    NoticeContainer,
    ActivityContainer,
    SignContainer,
    NewTaskContainer,
    ChooseLocaTionContainer,
    HotSchoolContainer,
    FaithContainer

}